<template>
  <div class="box">
    <!--通用echart操作列-->
    <el-form ref="form" label-width="100px" style="width: 90%">
      <el-form-item label="图层名：">
        <el-input size="mini" v-model="chooseComponent.layerName"></el-input>
      </el-form-item>
      <el-form-item label="在线文档：">
        <a href="#" style="font-size: 12px;color: #409eff" @click="viewDocment()">点击查看</a>
      </el-form-item>
      <el-form-item label="配置列表：">
        <el-button size="mini" @click="$refs.jsonEdit.open(chooseComponent.option.echartOption)">编辑</el-button>
      </el-form-item>
    </el-form>
    <el-collapse>
      <el-collapse-item title="标题设置" name="0">
        <el-form ref="form" label-width="100px" style="width: 90%">
          <el-form-item label="是否显示：">
            <el-switch v-model="echartOption.title.show"></el-switch>
          </el-form-item>
          <el-form-item label="内容：">
            <el-input size="mini" v-model="echartOption.title.text"></el-input>
          </el-form-item>
          <el-form-item label="颜色：">
            <el-color-picker v-model="echartOption.title.textStyle.color"></el-color-picker>
          </el-form-item>
          <el-form-item label="对齐：">
            <el-select size="mini" v-model="echartOption.title.left" placeholder="请选择">
              <el-option key="left" label="左边" value="left"></el-option>
              <el-option key="center" label="中间" value="center"></el-option>
              <el-option key="right" label="右边" value="right"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="风格：">
            <el-select size="mini" v-model="echartOption.title.textStyle.fontStyle" placeholder="请选择">
              <el-option key="normal" label="默认" value="normal"></el-option>
              <el-option key="italic" label="斜体" value="italic"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="粗细：">
            <el-slider :min="100" :max="900" v-model="echartOption.title.textStyle.fontWeight"></el-slider>
          </el-form-item>
          <el-form-item label="字体：">
            <el-input-number size="mini" v-model="echartOption.title.textStyle.fontSize" controls-position="right" :min="12"
                             :precision="0"></el-input-number>
          </el-form-item>
          <el-form-item label="偏移：">
            <el-input-number size="mini" v-model="echartOption.title.textStyle.lineHeight" controls-position="right" :min="0"
                             :precision="0"></el-input-number>
          </el-form-item>

        </el-form>
      </el-collapse-item>
      <el-collapse-item title="图例设置" name="1">
        <el-form ref="form" label-width="100px" style="width: 90%">
          <el-form-item label="是否显示：">
            <el-switch v-model="echartOption.legend.show"></el-switch>
          </el-form-item>
          <el-form-item label="颜色：">
            <el-color-picker v-model="echartOption.legend.textStyle.color"></el-color-picker>
          </el-form-item>
          <el-form-item label="风格：">
            <el-select size="mini" v-model="echartOption.legend.textStyle.fontStyle" placeholder="请选择">
              <el-option key="normal" label="默认" value="normal"></el-option>
              <el-option key="italic" label="斜体" value="italic"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="水平对齐：">
            <el-select size="mini" v-model="echartOption.legend.left" placeholder="请选择">
              <el-option key="left" label="左边" value="left"></el-option>
              <el-option key="center" label="中间" value="center"></el-option>
              <el-option key="right" label="右边" value="right"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="垂直偏移：">
            <el-input-number size="mini" v-model="echartOption.legend.top" controls-position="right"
                             :precision="0"></el-input-number>
          </el-form-item>
          <el-form-item label="粗细：">
            <el-slider :min="100" :max="900" v-model="echartOption.legend.textStyle.fontWeight"></el-slider>
          </el-form-item>
          <el-form-item label="字体：">
            <el-input-number size="mini" v-model="echartOption.legend.textStyle.fontSize" controls-position="right" :min="12"
                             :precision="0"></el-input-number>
          </el-form-item>
        </el-form>
        <el-collapse style="margin: 0 auto;width: 90%">
          <el-collapse-item title="图形设置" name="1-1">
            <el-form ref="form" label-width="100px" style="width: 90%">
              <el-form-item label="间距：">
                <el-input-number size="mini" v-model="echartOption.legend.itemGap" controls-position="right"
                                 :precision="0"></el-input-number>
              </el-form-item>
              <el-form-item label="宽度：">
                <el-input-number size="mini" v-model="echartOption.legend.itemWidth" controls-position="right"
                                 :precision="0"></el-input-number>
              </el-form-item>
              <el-form-item label="高度：">
                <el-input-number size="mini" v-model="echartOption.legend.itemHeight" controls-position="right"
                                 :precision="0"></el-input-number>
              </el-form-item>
            </el-form>

          </el-collapse-item>
        </el-collapse>

      </el-collapse-item>
      <el-collapse-item title="x轴设置" name="3">
        <el-collapse style="margin: 0 auto;width: 90%">
          <el-collapse-item title="标题设置" name="3-1">
            <el-form ref="form" label-width="100px" style="width: 90%">
              <el-form-item label="是否显示：">
                <el-switch v-model="echartOption.xAxis.show"></el-switch>
              </el-form-item>
              <el-form-item label="内容：">
                <el-input size="mini" v-model="echartOption.xAxis.name"></el-input>
              </el-form-item>
              <el-form-item label="偏移：">
                <el-input-number size="mini" v-model="echartOption.xAxis.nameGap" controls-position="right" :min="0"
                                 :precision="0"></el-input-number>
              </el-form-item>
              <el-form-item label="旋转：">
                <el-input-number size="mini" v-model="echartOption.xAxis.nameRotate" controls-position="right" :min="0" :max="360"
                                 :precision="0"></el-input-number>
              </el-form-item>
              <el-form-item label="位置：">
                <el-select size="mini" v-model="echartOption.xAxis.nameLocation" placeholder="请选择">
                  <el-option key="start" label="左边" value="start"></el-option>
                  <el-option key="center" label="中间" value="center"></el-option>
                  <el-option key="end" label="右边" value="end"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="颜色：">
                <el-color-picker v-model="echartOption.xAxis.nameTextStyle.color"></el-color-picker>
              </el-form-item>
              <el-form-item label="风格：">
                <el-select size="mini" v-model="echartOption.xAxis.nameTextStyle.fontStyle" placeholder="请选择">
                  <el-option key="normal" label="默认" value="normal"></el-option>
                  <el-option key="italic" label="斜体" value="italic"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="粗细：">
                <el-slider :min="100" :max="900" v-model="echartOption.xAxis.nameTextStyle.fontWeight"></el-slider>
              </el-form-item>
              <el-form-item label="字体：">
                <el-input-number size="mini" v-model="echartOption.xAxis.nameTextStyle.fontSize" controls-position="right" :min="12"
                                 :precision="0"></el-input-number>
              </el-form-item>
            </el-form>
          </el-collapse-item>
          <el-collapse-item title="文本设置" name="3-2">
            <el-form ref="form" label-width="100px" style="width: 90%">
              <el-form-item label="是否显示：">
                <el-switch v-model="echartOption.xAxis.axisLabel.show"></el-switch>
              </el-form-item>
              <el-form-item label="颜色：">
                <el-color-picker v-model="echartOption.xAxis.axisLabel.color"></el-color-picker>
              </el-form-item>
              <el-form-item label="风格：">
                <el-select size="mini" v-model="echartOption.xAxis.axisLabel.fontStyle" placeholder="请选择">
                  <el-option key="normal" label="默认" value="normal"></el-option>
                  <el-option key="italic" label="斜体" value="italic"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="对齐：">
                <el-select size="mini" v-model="echartOption.xAxis.axisLabel.align" placeholder="请选择">
                  <el-option key="left" label="左边" value="left"></el-option>
                  <el-option key="center" label="中间" value="center"></el-option>
                  <el-option key="right" label="右边" value="right"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="偏移：">
                <el-input-number size="mini" v-model="echartOption.xAxis.axisLabel.lineHeight" controls-position="right" :precision="0"></el-input-number>
              </el-form-item>
              <el-form-item label="粗细：">
                <el-slider :min="100" :max="900" v-model="echartOption.xAxis.axisLabel.fontWeight"></el-slider>
              </el-form-item>
              <el-form-item label="字体：">
                <el-input-number size="mini" v-model="echartOption.xAxis.axisLabel.fontSize" controls-position="right" :min="12"
                                 :precision="0"></el-input-number>
              </el-form-item>
            </el-form>
          </el-collapse-item>
        </el-collapse>
      </el-collapse-item>
      <el-collapse-item title="y轴设置" name="4">
        <el-collapse style="margin: 0 auto;width: 90%">
          <el-collapse-item title="标题设置" name="4-1">
            <el-form ref="form" label-width="100px" style="width: 90%">
              <el-form-item label="是否显示：">
                <el-switch v-model="echartOption.yAxis.show"></el-switch>
              </el-form-item>
              <el-form-item label="内容：">
                <el-input size="mini" v-model="echartOption.yAxis.name"></el-input>
              </el-form-item>
              <el-form-item label="偏移：">
                <el-input-number size="mini" v-model="echartOption.yAxis.nameGap" controls-position="right"
                                 :precision="0"></el-input-number>
              </el-form-item>
              <el-form-item label="旋转：">
                <el-input-number size="mini" v-model="echartOption.yAxis.nameRotate" controls-position="right" :min="0" :max="360"
                                 :precision="0"></el-input-number>
              </el-form-item>
              <el-form-item label="位置：">
                <el-select size="mini" v-model="echartOption.yAxis.nameLocation" placeholder="请选择">
                  <el-option key="end" label="顶部" value="end"></el-option>
                  <el-option key="center" label="中间" value="center"></el-option>
                  <el-option key="start" label="底部" value="start"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="颜色：">
                <el-color-picker v-model="echartOption.yAxis.nameTextStyle.color"></el-color-picker>
              </el-form-item>
              <el-form-item label="风格：">
                <el-select size="mini" v-model="echartOption.yAxis.nameTextStyle.fontStyle" placeholder="请选择">
                  <el-option key="normal" label="默认" value="normal"></el-option>
                  <el-option key="italic" label="斜体" value="italic"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="粗细：">
                <el-slider :min="100" :max="900" v-model="echartOption.yAxis.nameTextStyle.fontWeight"></el-slider>
              </el-form-item>
              <el-form-item label="字体：">
                <el-input-number size="mini" v-model="echartOption.yAxis.nameTextStyle.fontSize" controls-position="right" :min="12"
                                 :precision="0"></el-input-number>
              </el-form-item>
            </el-form>
          </el-collapse-item>
          <el-collapse-item title="文本设置" name="4-2">
            <el-form ref="form" label-width="100px" style="width: 90%">
              <el-form-item label="是否显示：">
                <el-switch v-model="echartOption.yAxis.axisLabel.show"></el-switch>
              </el-form-item>
              <el-form-item label="颜色：">
                <el-color-picker v-model="echartOption.yAxis.axisLabel.color"></el-color-picker>
              </el-form-item>
              <el-form-item label="风格：">
                <el-select size="mini" v-model="echartOption.yAxis.axisLabel.fontStyle" placeholder="请选择">
                  <el-option key="normal" label="默认" value="normal"></el-option>
                  <el-option key="italic" label="斜体" value="italic"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="对齐：">
                <el-select size="mini" v-model="echartOption.yAxis.axisLabel.align" placeholder="请选择">
                  <el-option key="left" label="左边" value="left"></el-option>
                  <el-option key="center" label="中间" value="center"></el-option>
                  <el-option key="right" label="右边" value="right"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="偏移：">
                <el-input-number size="mini" v-model="echartOption.yAxis.axisLabel.margin" controls-position="right" :precision="0"></el-input-number>
              </el-form-item>
              <el-form-item label="粗细：">
                <el-slider :min="100" :max="900" v-model="echartOption.yAxis.axisLabel.fontWeight"></el-slider>
              </el-form-item>
              <el-form-item label="字体：">
                <el-input-number size="mini" v-model="echartOption.yAxis.axisLabel.fontSize" controls-position="right" :min="12"
                                 :precision="0"></el-input-number>
              </el-form-item>
            </el-form>
          </el-collapse-item>

        </el-collapse>
      </el-collapse-item>
    </el-collapse>

    <jsonEdit ref="jsonEdit" @ok="jsonEditOk"></jsonEdit>
  </div>
</template>

<script>
  export default {
    name: "op_general",
    components: {
      'jsonEdit': () => import('@/components/jsonEdit/index.vue'),
    },
    computed: {
      //当前选中的值
      chooseComponent() {
        return this.$store.state.chooseComponent
      },

      //当前选中的图标的Option
      echartOption() {
        return this.$store.state.chooseComponent.option.echartOption;
      },

    },
    data(){
      return{
        active:"1",
      }
    },
    methods:{
      //json编辑确认
      jsonEditOk(obj){
        this.chooseComponent.option.echartOption=obj;
      },
      //查看文档
      viewDocment(){
        window.open("https://echarts.apache.org/zh/option.html#title");
      },

    }
  }
</script>

<style scoped lang="scss">
  .box {
    width: 100%;
    flex: 1;
    color: white;

  }
</style>
